<template>
  <div class="visualization">
    <div class="box">
      <div class="canves" ref="guage"></div>
    </div>
    <div class="box stacked">
      <div class="canves" ref="stacked"></div>
    </div>
    <div class="box">
      <div class="canves" ref="website"></div>
    </div>
    <div class="box">
      <div class="canves" ref="main">
        <dv-capsule-chart :config="config" style="width:100%;height:100%;color: gray;" />
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { gaugeOptions, lineOption, websiteOption } from "../layout";
export default {
  name: "CatcoffeeVisualization",

  data() {
    return {
      gaugeOptions,
      lineOption,
      websiteOption,
      config: {
        data: [],
        showValue: true,
        colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff']
      },
    };
  },

  mounted() {
    this.getGauge();
    this.getLine();
    this.getWebsite()
  },

  methods: {
    getGauge() {
      this.$axios({
        url: "/view/getSevenDay",
        method: "get",
      }).then(res => {
        let count = res.data.data.sevenOrderCount[6];
        this.gaugeOptions.series[0].data[0].value = count;
        let myChart = echarts.init(this.$refs.guage);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
        this.gaugeOptions && myChart.setOption(this.gaugeOptions);
      });
    },
    getLine() {
      this.$axios({
        url: "/view/getSevenDay",
        method: "get",
      }).then((res) => {
        let data = res.data.data
        let myChart = echarts.init(this.$refs.stacked);
        let option = this.lineOption;
        window.addEventListener("resize", function () {
          myChart.resize();
        });
        option.xAxis.data = data.sevenDay
        option.series[0].data = data.sevenOrderCount
        option.series[1].data = data.sevenRegisterCount
        option && myChart.setOption(option);
      });
    },
    getWebsite() {
      this.$axios.get("/view/getOrderRanking").then(res => {
        let myChart = echarts.init(this.$refs.website);
        this.config.data = res.data.data.sort(
          function (a, b) {
            return a.value - b.value;
          });
        this.config = { ...this.config };
        console.log(this.config);
        this.websiteOption.series[0].data = res.data.data.sort(
          function (a, b) {
            return b.value - a.value;
          });
        this.websiteOption && myChart.setOption(this.websiteOption)
      })
    }
  },
};
</script>

<style scoped>
.visualization {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}

.box {
  flex: 1;
  min-width: 33.3333%;
  height: 50%;
  box-sizing: border-box;
  padding: 10px;
  transition: 0.1s linear all;
  background-color: white;
}

.canves {
  transition: 0.1s all linear;
  width: 100%;
  height: 100%;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  background-color: rgb(250, 250, 250);
  padding: 10px;
}

.stacked {
  flex: 2;
  min-width: 66.6666%;
}
</style>